<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 用过属性绑定{v-bind}的形式，把需要传递给子组件的数据以属性绑定的形式传递到子组件内部，供子组件使用 -->
        <com1 :parentmsg = "msg"></com1>
    </div>
    
    <script>

        //创建vue实例，得到ViewModel
        var vm = new Vue({
            el:"#app",
            data:{
                msg: '123 啊-父组件中的数据'
            },
            methods: {},
            components: {
                //结论，经过演示，发现子组件中，默认无法访问到 父组件data中的数据和 methods中的方法
                com1: {
                    //data中的数据都是可读可写的
                    data() { // 子组件中的的data数据， 不是父组件传过来的，而是子组件私有，例如:子组件通过ajax请求的数据可以放在data上
                        return {
                            title: '123',
                            content: 'qqq'
                        }
                    },
                    //注意: 组件中的所有props数据，都是由父组件传递给子组件的
                    //注意: props 中的数据都是只读的，无法重新赋值
                    props: ['parentmsg'], //把父组件传过来的数据parentmsg先在props数组中定义，才能使用这个数据
                    template: '<h1>这是子组件 --{{ parentmsg }}</h1>'
                }
            }
        })
    </script>
</body>
</html>